<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:form id="dialogForm" enctype="multipart/form-data">
        <p:growl id="messages" showDetail="false" autoUpdate="true"  /> 
        <p:panel id="proprietarioPanel" styleClass="container_24 clearfix both withoutBorder">
            <h4 class="title">Dados Gerais</h4>

            <p:outputLabel id="personOutputLabel" value="Pessoa: " styleClass="grid_3" style="top: 6px" />
            <div class="grid_8">
                <p:selectOneRadio id="personRadioButton" value="#{managerProprietario.conjuge.tipoDocumento}" >
                    <f:selectItems value="#{managerProprietario.tipoDocumentoList()}" />
                    <p:ajax event="change" update="proprietarioPanel" />
                </p:selectOneRadio>
            </div>
            <div class="clear-both"/>

            <p:outputLabel id="tipoDocumentoLabel" for="tipoDocumentoInput"
                           value="#{managerProprietario.conjuge.tipoDocumento}" 
                           styleClass="grid_3"/>
            <p:inputMask id="tipoDocumentoInput" styleClass="grid_8"
                         value="#{managerProprietario.conjugePessoaFisica ? 
                                  managerProprietario.conjuge.cpf : managerProprietario.conjuge.cnpj}"
                         mask="#{managerProprietario.conjugePessoaFisica ? 
                                 '999.999.999-99':'99.999.999/9999-99'}" > 
            </p:inputMask>

            <p:outputLabel value="Data Nasc.: " styleClass="grid_3" for="dateNascCalendar" 
                           rendered="#{managerProprietario.conjugePessoaFisica}" />
            <p:calendar id="dateNascCalendar" value="#{managerProprietario.conjuge.dataNasc}" showOn="both" 
                        locale="pt" yearRange="1900:2020" navigator="true" pattern="dd/MM/yyyy"
                        styleClass="grid_8" rendered="#{managerProprietario.conjugePessoaFisica}" />

            <div class="clear-both" style="#{managerProprietario.conjugePessoaFisica ? '' : 'display:none'}"/>

            <p:outputLabel value="Nome: " styleClass="grid_3" for="nomeInputText" 
                           rendered="#{managerProprietario.conjugePessoaFisica}"/>
            <p:inputText id="nomeInputText" styleClass="grid_20 ajustInput"
                         value="#{managerProprietario.conjuge.nome}"
                         required="true" 
                         rendered="#{managerProprietario.conjugePessoaFisica}"/>  

            <p:outputLabel value="RG: " styleClass="grid_3" for="rgInputText" 
                           rendered="#{managerProprietario.conjugePessoaFisica}" />
            <p:inputText id="rgInputText" styleClass="grid_8" value="#{managerProprietario.conjuge.rg}" 
                         rendered="#{managerProprietario.conjugePessoaFisica}"/>

            <p:outputLabel value="Org. Emissor" styleClass="grid_3 orgaoEmissorLabelContribuinte" for="orgInputText" 
                           rendered="#{managerProprietario.conjugePessoaFisica}" />
            <p:inputText id="orgInputText" styleClass="grid_8" value="#{managerProprietario.conjuge.orgaoEmissor}" 
                         rendered="#{managerProprietario.conjugePessoaFisica}"/>
            <div class="clear" style="#{managerProprietario.conjugePessoaFisica ? '' : 'display:none'}"/>

            <p:outputLabel value="Telefone" styleClass="grid_3" for="telefone"/>
            <p:inputText id="telefone" value="#{managerProprietario.conjuge.telefone}"
                         styleClass="grid_8"/>

            <p:outputLabel value="Local de Trabalho" styleClass="grid_3 alpha localTrabalhoLabel" 
                           for="localTrabalhoInputText" style="margin-left: -12px !important"
                           rendered="#{managerProprietario.conjugePessoaFisica}" />
            <p:inputText id="localTrabalhoInputText" styleClass="grid_8 localTrabalhoInputTextContribuinte" 
                         value="#{managerProprietario.conjuge.localTrabalho}" 
                         rendered="#{managerProprietario.conjugePessoaFisica}"/>
            <div class="clear"/>

            <p:outputLabel value="Profissão" styleClass="grid_3" for="profissaoInputText" 
                           rendered="#{managerProprietario.conjugePessoaFisica}" />
            <p:inputText id="profissaoInputText" styleClass="grid_8" value="#{managerProprietario.conjuge.profissao}" 
                         rendered="#{managerProprietario.conjugePessoaFisica}"/>

            <div class="clear"/> 

            <p:outputLabel value="Nome Fantasia: " styleClass="grid_3 nomeFantasiaContribuinte"
                           for="nameFantasyInputText" rendered="#{managerProprietario.conjuge.tipoDocumento.tipo eq 'CNPJ'}" />
            <p:inputText id="nameFantasyInputText" styleClass="grid_20 ajustInput"
                         value="#{managerProprietario.conjuge.nomeFantasia}"
                         required="true" 
                         rendered="#{managerProprietario.conjuge.tipoDocumento.tipo eq 'CNPJ'}"/>
            <div class="clear"/> 
            <br/>
        </p:panel>

        <p:panel id="addressPanel" style="margin-top: -25px;" 
                 styleClass="container_24 clearfix both withoutBorder">
            <h4 class="title">Endereço</h4>

            <p:outputLabel value="CEP" styleClass="grid_3" for="cepInputMask" />
            <p:inputMask  id="cepInputMask" styleClass="grid_4" mask="99.999-999"
                          value="#{managerProprietario.conjuge.endereco.cep}"> 
                <p:ajax event="blur" update=":dialogForm:addressPanel"  
                        listener="#{managerProprietario.existeEnderecoConjuge()}" />
            </p:inputMask>
            <div class="clear"/>

            <p:outputLabel value="Logradouro" styleClass="grid_3 logradouroLabelContribuinte" for="patioInputText" />
            <p:inputText id="patioInputText" styleClass="grid_20" 
                         value="#{managerProprietario.conjuge.endereco.logradouro}"/>

            <p:outputLabel value="Bairro: " styleClass="grid_3" for="bairroInputText" />
            <p:inputText id="bairroInputText" styleClass="grid_20" 
                         value="#{managerProprietario.conjuge.endereco.bairro}"/>
            <div class="clearfix"/>

            <p:outputLabel value="Estado: " styleClass="grid_3" for="estadoInputText" />
            <p:inputText id="estadoInputText" styleClass="grid_4"
                         value="#{managerProprietario.conjuge.endereco.uf}"/>

            <p:outputLabel value="Município: " styleClass="grid_4 alpha" for="municipioInputText" />
            <p:inputText id="municipioInputText" styleClass="grid_12"
                         value="#{managerProprietario.conjuge.endereco.municipio}"/>

            <p:outputLabel value="Número: " styleClass="grid_3" for="numInputText" />
            <p:inputText id="numInputText" styleClass="grid_4"
                         value="#{managerProprietario.conjuge.endereco.numero}"/>

            <p:outputLabel value="Complemento: " styleClass="grid_4 alpha" for="complementInputText" />
            <p:inputText id="complementInputText" styleClass="grid_12" 
                         value="#{managerProprietario.conjuge.endereco.compl}"/>

        </p:panel>

        <p:panel id="socioEconomicoPanel" styleClass="container_24 clearfix withoutBorder">
            <h4 class="title">Sócio-econômico</h4>

            <fieldset>
                <legend>Tempo de Moradia</legend>  

                <p:outputLabel value="Residência" styleClass="grid_3" for="tempoMoradiaInputText" />
                <p:inputText id="tempoMoradiaInputText" styleClass="grid_8"
                             value="#{managerProprietario.conjuge.tempoMoradia}" />

                <p:outputLabel value="Município" styleClass="grid_3" for="tempoMoradiaMunicipioInputText" />
                <p:inputText id="tempoMoradiaMunicipioInputText" styleClass="grid_8"
                             value="#{managerProprietario.conjuge.tempoMoradiaMunicipio}" />
            </fieldset>
            <div class="clear"/>

            <fieldset>
                <legend>Família</legend>  

                <p:outputLabel value="Composição" styleClass="grid_3"/>
                <p:selectOneRadio styleClass="grid_8" layout="pageDirection" 
                                  value="#{managerProprietario.conjuge.composicaoFamiliar}">
                    <f:selectItems value="#{managerUtilitario.composicaoFamiliar}"/>
                </p:selectOneRadio>

                <p:inputText value="#{managerProprietario.conjuge.composicaoFamiliar.nome} salários mínimos" 
                             styleClass="grid_8" rendered="#{managerProprietario.readonly}"/>

                <p:outputLabel value="Renda" styleClass="grid_3"/>
                <p:selectOneRadio styleClass="grid_8" layout="pageDirection" 
                                  value="#{managerProprietario.conjuge.rendaFamiliar}">
                    <f:selectItems value="#{managerUtilitario.rendaFamiliar}"/>
                </p:selectOneRadio>

                <p:inputText value="#{managerProprietario.conjuge.composicaoFamiliar.nome} salários mínimos" 
                             styleClass="grid_8" rendered="#{managerProprietario.readonly}"/>
            </fieldset>
            <div class="clear"/>

            <fieldset>
                <legend>Participa do Programa Minha Casa Minha Vida ?</legend>  
                <p:selectOneRadio styleClass="grid_3" value="#{managerProprietario.conjuge.minhaCasaMinhaVida}">
                    <f:selectItem itemLabel='Sim' itemValue="true" /> 
                    <f:selectItem itemLabel='Não' itemValue="false" />
                </p:selectOneRadio>

                <p:outputLabel value="#{managerProprietario.conjuge.minhaCasaMinhaVida ? 'Sim' : 'Não'}"
                               styleClass="grid_2" rendered="#{managerProprietario.readonly}" />
            </fieldset>

            <fieldset>
                <legend>Participa do Programa Bolsa Família ?</legend>
                <p:selectOneRadio styleClass="grid_3" value="#{managerProprietario.conjuge.bolsaFamilia}">
                    <f:selectItem itemLabel='Sim' itemValue="true" /> 
                    <f:selectItem itemLabel='Não' itemValue="false" />
                    <p:ajax event="change" update="bolsaFamiliaPanel" />
                </p:selectOneRadio>

                <p:panel id="bolsaFamiliaPanel" styleClass="withoutBorder" 
                         style="#{managerProprietario.conjuge.bolsaFamilia eq false or managerProprietario.conjuge.bolsaFamilia eq null ? 'display: none' : ''}">
                    <p:outputLabel styleClass="grid_3" value="Valor" for="valorBolsaFamilia" style="margin-left: 140px; top: 2px" />
                    <p:inputText id="valorBolsaFamilia" styleClass="grid_4" value="#{managerProprietario.conjuge.valorBolsaFamilia}"
                                 onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );" >
                        <f:convertNumber type="currency" locale="pt-BR"/>
                    </p:inputText>
                </p:panel>
            </fieldset>

        </p:panel>

        <p:panel id="documentoPanel" styleClass="container_24 clearfix withoutBorder">

            <p:fileUpload id="fileUpload" 
                          mode="advanced" label="Anexar"
                          uploadLabel="Enviar"
                          cancelLabel="Cancelar"
                          fileUploadListener="#{managerProprietario.adicionarAnexo}"
                          multiple="false" auto="true"
                          allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                          dragDropSupport="true"
                          invalidFileMessage="Tipo de arquivo não suportado."
                          invalidSizeMessage="Tamanho do arquivo não é suportado"
                          immediate="true" update="documentoPanel, dlgAnexo"/>

            <fieldset>
                <legend>Anexos</legend>

                <p:panel styleClass="withoutBorder clearfix container_24" >

                    <ui:repeat  value="#{managerProprietario.conjuge.anexos}" var="a">

                        <p:panel styleClass="thumbnail">

                            <p:commandButton id="editarButton" alt="Editar" styleClass="ui-button-only button-edit"
                                             icon="ui-icon-pencil" 
                                             update=":dialogForm:documentoPanel, :dialogForm:dlgEditarAnexo" 
                                             process=":dialogForm:documentoPanel" oncomplete="dlgEditarAnexo.show()"
                                             actionListener="#{managerProprietario.editarAnexoConjuge(a)}" />
                            <p:commandButton id="removeButton" alt="Remover" styleClass="ui-button-only button-remove"
                                             icon="ui-icon-trash" update=":dialogForm:documentoPanel" 
                                             process=":dialogForm:documentoPanel" 
                                             actionListener="#{managerProprietario.removerAnexoConjuge(a)}" />

                            <h:outputLink value="#{a.tipo ne 'application/pdf' ? 'viewImage.xhtml':'show'}"
                                          title="#{a.nomeExibicao}" target="_blank" styleClass="grid_24">

                                <p:graphicImage styleClass="image grid_3 anexoImovel" rendered="#{managerImagem.imagem(a)}"
                                                url="#{managerImagem.urlThumbnailImagem(a)}" />

                                <p:graphicImage styleClass="image grid_3 anexoImovel" rendered="#{managerImagem.PDF(a)}" 
                                                url="#{managerImagem.urlPDF}" />
                                <div class="clear-both"/>

                                <p:outputLabel  value="#{managerImagem.nomeAnexo(a)}" 
                                                style="margin-left:1%; width: 100px;" rendered="#{managerImagem.imagem(a)}"/>

                                <p:outputLabel  value="#{managerImagem.nomeAnexoPdf(a)}" 
                                                style="margin-left:1%; width: 100px;" rendered="#{managerImagem.PDF(a)}"/>
                                <f:param name="annex" value="#{managerImagem.urlVisualziarImagem(a)}"/>
                            </h:outputLink>
                        </p:panel>
                    </ui:repeat>

                    <p:dialog id="dlgAnexo" width="640" widgetVar="dlgAnexo" modal="false" 
                              header="Anexo" styleClass="container_24 clearfix" 
                              closeOnEscape="true" closable="false" resizable="false" >

                        <p:outputLabel value="Nome" styleClass="grid_3" for="nomeAnexo"/>
                        <p:inputText id="nomeAnexo" value="#{managerProprietario.anexo.nomeExibicao}" styleClass="grid_20"/>
                        <div class="clear"/>

                        <p:outputLabel value="Tipo" styleClass="grid_3" for="tipoAnexo" />
                        <div class="grid_20">
                            <p:selectOneMenu id="tipoAnexo" panelStyle="width:150px;" 
                                             value="#{managerProprietario.anexo.tipoAnexo}">
                                <f:selectItem itemLabel="" itemValue="" />
                                <f:selectItems value="#{managerUtilitario.tipoAnexo}"/>
                            </p:selectOneMenu>
                        </div>
                        <div class="clear"/>

                        <div class="buttonAction">
                            <p:commandButton value="Adicionar" actionListener="#{managerProprietario.adicionarAnexoConjuge()}"
                                             update="documentoPanel" process="dlgAnexo"
                                             oncomplete="dlgAnexo.hide()" icon="ui-icon-check"/>
                            <p:commandButton value="Cancelar" actionListener="#{managerProprietario.removerAnexo()}"
                                             process="@this" oncomplete="dlgAnexo.hide()" icon="ui-icon-close"/>
                        </div>

                        <script>
                            $(document).ready(function() {
                                $('#dialogForm\\:tipoAnexo_panel').removeAttr('style');
                                $('#dialogForm\\:tipoAnexo_panel').css('width', 510);
                            });
                        </script>

                    </p:dialog>

                    <p:dialog id="dlgEditarAnexo" width="640" widgetVar="dlgEditarAnexo" modal="false" 
                              header="Anexo" styleClass="container_24 clearfix" 
                              closeOnEscape="true" closable="false" resizable="false" >

                        <p:outputLabel value="Nome" styleClass="grid_3" for="nomeAnexoEditar"/>
                        <p:inputText id="nomeAnexoEditar" value="#{managerProprietario.anexo.nomeExibicao}" styleClass="grid_20"/>
                        <div class="clear"/>

                        <p:outputLabel value="Tipo" styleClass="grid_3" for="tipoAnexoEditar" />
                        <div class="grid_20">
                            <p:selectOneMenu id="tipoAnexoEditar" panelStyle="width:150px;" 
                                             value="#{managerProprietario.anexo.tipoAnexo}">
                                <f:selectItem itemLabel="" itemValue="" />
                                <f:selectItems value="#{managerUtilitario.tipoAnexo}"/>
                            </p:selectOneMenu>
                        </div>
                        <div class="clear"/>

                        <div class="buttonAction">
                            <p:commandButton value="Salvar" actionListener="#{managerProprietario.atualizarAnexoConjuge()}"
                                             update="documentoPanel" process="dlgEditarAnexo"
                                             oncomplete="dlgEditarAnexo.hide()" icon="ui-icon-check"/>
                            <p:commandButton value="Cancelar" oncomplete="dlgEditarAnexo.hide()" 
                                             actionListener="#{managerProprietario.cancelarAnexo()}" 
                                             process="@this" icon="ui-icon-close"/>
                        </div>

                        <script>
                            $(document).ready(function() {
                                $('#dialogForm\\:tipoAnexoEditar_panel').removeAttr('style');
                                $('#dialogForm\\:tipoAnexoEditar_panel').css('width', 510);
                            });
                        </script>

                    </p:dialog>
                </p:panel>
            </fieldset>
        </p:panel>

        <br/>

        <div class="buttonAction">
            <p:commandButton value="Salvar" icon="ui-icon-disk" update="@all"
                             actionListener="#{managerProprietario.saveConjuge()}"
                             styleClass="ui-priority-primary" />

            <p:commandButton value="Cancelar" icon="ui-icon-trash"
                             actionListener="#{managerProprietario.initConjuge()}"
                             process="@this" oncomplete="dlgProprietario.hide()"/>
        </div>
    </h:form>
</html>
